import bg from '@/assets/b_bg.png';
import { getListByMerchantId } from '@/services/center';
import { findByCodeList } from '@/services/login';
import { useUrlParams } from '@/utils';
import { useRequest } from 'ahooks';
import { Card, Flex, Row } from 'antd';
import { Helmet, useIntl, useLocation } from 'umi';
import ProductCard from '../Home/Card';
import './index.less';
const Merchant: React.FC = () => {
  const location = useLocation();
  const intl = useIntl();
  const search = decodeURIComponent(location.search);
  const merchantId = useUrlParams('id', search);
  const name = useUrlParams('name', search);
  // const productName = useUrlParams('productName', search);
  const logo = useUrlParams('logo', search);
  const introduction = useUrlParams('introduction', search);
  const { data: optionsList } = useRequest(() => {
    return findByCodeList({
      code: 'productKey,disburseAverageTime,productFeatureType,orderListStatus',
    });
  });
  const { data, loading, mutate } = useRequest(() => {
    return getListByMerchantId({ merchantId });
  });

  return (
    <div>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="common" style={{ paddingBottom: 220 }}>
        <div
          style={{
            backgroundImage: `url(${bg})`,
            backgroundSize: '100% 100%',
            margin: '40px 0 36px',
            padding: '42px',
            borderRadius: 8,
          }}
        >
          <Flex className="merchant_top" align="center" gap={29}>
            <div
              style={{
                padding: '26px 10px',
                backgroundColor: '#fff',
                borderTopLeftRadius: 20,
                borderBottomRightRadius: 20,
              }}
            >
              <img className="merchant_top_img" src={logo} />
            </div>
            <div style={{ color: '#fff' }}>
              <div style={{ fontSize: 30, fontWeight: 700, marginBottom: 12 }}>{name}</div>
              <div style={{ lineHeight: '20px' }}>{introduction}</div>
            </div>
          </Flex>
        </div>
        <Card
          bordered={false}
          loading={loading}
          style={{ boxShadow: 'none' }}
          styles={{
            body: {
              padding: 0,
            },
          }}
        >
          <Row gutter={[0, 25]}>
            {data?.data?.map((item, index) => {
              return (
                <ProductCard
                  codeList={optionsList?.data || {}}
                  key={item.id}
                  item={item}
                  index={index}
                  data={data}
                  mutate={mutate}
                />
              );
            })}
          </Row>
        </Card>
      </div>
    </div>
  );
};

export default Merchant;
